<template>
  <div class="app-container">
    <!-- 背景图案 -->
    <div class="background-pattern"></div>

    <!-- 页面内容 -->
    <div class="page-content">
      <el-row :gutter="50" class="card-grid">
        <!-- 左侧长框 - 添加图片 -->
        <el-col :span="6">
          <el-card class="box-card left-box"  @click ="handleDataComparisonClick">
            <img src="@/assets/left-card-image.jpg" class="card-image" alt="左侧图片" />
          </el-card>
        </el-col>

        <!-- 中间上下排列的两个横向框 -->
        <el-col :span="12" >
          <el-card class="box-card middle-top-box" @click="handleUploadClick">
            <img src="@/assets/middle-top-image.jpg" class="card-image" alt="中上图片" />
          </el-card>
          <el-card class="box-card middle-bottom-box" @click="handleDataAnalysisClick">
            <img src="@/assets/middle-bottom-image.jpg" class="card-image" alt="中下图片" />
          </el-card>
        </el-col>

        <!-- 右侧长框 -->
        <el-col :span="6">
          <el-card class="box-card right-box" @click="handleDataVisualizationClick">
            <img src="@/assets/right-card-image.jpg" class="card-image" alt="右侧图片" />
          </el-card>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script setup>
// 导入必要的Element Plus组件
import { ElRow, ElCol, ElCard } from 'element-plus'
import { useRouter } from 'vue-router'

const router = useRouter()

const handleUploadClick = () => {
  router.push({ name: 'UploadView', path: '/upload-page' })
}
const handleDataComparisonClick = () => {
  router.push({ name: 'comparison', path: '/comparison' })
}
const handleDataAnalysisClick = () => {
  router.push({ name: 'analysis', path: '/analysis' })
}
const handleDataVisualizationClick = () => {
  router.push({ name: 'visualization', path: '/visualization' })
}
</script>

<style scoped>
html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}

.app-container {
  position: relative;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.background-pattern {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url('@/assets/首页菜单栏.png');
  background-size: cover;
  background-position: center;
  z-index: -1;
}

.page-content {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0px;
  box-sizing: border-box;
  margin-top:5%;
}

/* 卡片网格布局 */
.card-grid {
  width: 95%;
  margin-top: 5vh;
  height: 85vh;
}

.box-card {
  height: 100%;
  border: none;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  transition: all 0.3s ease;
  background-color: #15245c;
  opacity: 1;

  &:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
  }
}

.left-box,
.right-box {
  height: 85%;
  margin: 0 auto;
  margin-top: 5vh;
}

.middle-top-box {
  height: calc(70% - 2vh);
  margin-bottom: 2vh;
}

.middle-bottom-box {
  height: calc(30% - 2vh);
}

/* 响应式设计 */
@media (max-width: 992px) {
  .card-grid {
    height: auto;
  }

  .el-col {
    :deep(.el-card) {
      height: auto;
      min-height: 20vh;
    }
  }

  .middle-top-box,
  .middle-bottom-box {
    height: auto;
    margin-bottom: 2vh;
  }
}

.card-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
</style>